<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html data-use-rem="750">
<head>
    <title>查询档案</title>
    <meta charset="utf-8">
    <meta name="aplus-terminal" content="1">
    <meta name="apple-mobile-web-app-title" content="">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no, address=no">
    <!-- 样式 -->
    <link rel="stylesheet" type="text/css" href="/static/info/css/public.css">

    <link rel="stylesheet" type="text/css" href="/static/info/css/swiper.css" />
    <link rel="stylesheet" type="text/css" href="/static/info/css/style.css" />
    <link rel="stylesheet" type="text/css" href="/static/info/css/animate.css">
    <link rel="stylesheet" href="/static/bower_components/bootstrap/dist/css/bootstrap.min.css">
  	<link rel="stylesheet" href="/static/bootstrapDialog/css/bootstrap-dialog.min.css">
</head>
<body class="skin">
              <div class="logo-img" >
                  <img th:src="${qrCode.author.organization.logo}" class="img-block" />
              </div>
            <div class="section">
                <div class="title">
                    <img src="/static/info/images/arl.png" /><span th:text="${qrCode.itemBatchRecord==null?qrCode.itemProcessRecord!=null?qrCode.itemProcessRecord.itemProcess.name:'未绑定商品':qrCode.itemBatchRecord.itemProductionLine.item.name}"></span><img src="/static/info/images/art.png" />
                </div>
                <div class="pro-msg">
                	<img th:src="${qrCode.itemBatchRecord==null?qrCode.itemProcessRecord!=null?qrCode.itemProcessRecord.itemProcess.image:'':qrCode.itemBatchRecord.itemProductionLine.item.image}" class="pro-msg" />
                    <div class="msg">
                        <p><span th:text="${qrCode.itemBatchRecord!=null?'溯源批次编号:'+qrCode.itemBatchRecord.id:qrCode.itemProcessRecord!=null?'流程记录编号:'+qrCode.itemProcessRecord.id:'未绑定批次编号'}"></span></p>
                    </div>
                </div>
                <div class="note" th:text="${qrCode.author.organization.name}"></div>
                <div class="nav-bottom">
                    <div class="flex-box flex-align-center">
                        <div>
                            <a href="#" onclick="showInfoTree()"><img src="/static/info/images/icon1.png" class="img-block" /></a>
                        </div>
                        <div>
                            <a href="#"><img src="/static/info/images/icon2.png" class="img-block" /></a>
                        </div>
                        <div>
                            <a href="#"><img src="/static/info/images/icon3.png" class="img-block" /></a>
                        </div>
                        <div>
                            <a th:href="${'/company/'+qrCode.author.organization.name}"><img src="/static/info/images/icon4.png" class="img-block" /></a>
                        </div>
                    </div>
                </div>
                </div>
                <div class="modal fade modalIndex" id="infoTree_Modal" role="dialog">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<h4 class="modal-title">溯源信息</h4>
							</div>
							<div class="modal-body" style="text-align:center;">
							<div id="infoTree_div">
								<ul class="infoTree_contain">
								</ul>
							</div>
							</div>
							<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							</div>
						</div>
					</div>
				</div>

    <!-- 脚本 -->
<!-- jQuery 3 -->
	<script src="/static/bower_components/jquery/dist/jquery.min.js"></script>
    <script src="/static/info/js/swiper.min.js"></script>
    <script src="/static/info/js/rem.js"></script>
    <!-- Bootstrap 3.3.7 -->
	<script src="/static/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
	<script src="/static/bootstrapDialog/js/bootstrap-dialog.min.js"></script>
    <script th:inline="javascript">
    	var qrCode = [[${qrCode}]];
    	var showInfoTree = function(){
    		var qrCodeTemplate = qrCode.qrCodeTemplate;
    		var dataHeads = qrCodeTemplate.dataHeads.split('#');
    		var dataValues = qrCode.dataValues.split('#');
    		var nums = dataHeads.length;
    		var needHeight = 135*(parseInt(nums/2)+(nums%2)+1);
    		$('#infoTree_div').parent().height(needHeight+'px');
    		$('#infoTree_div').height(needHeight+'px');
			var $dCon=$('#infoTree_div .infoTree_contain');
			$dCon.empty();
			//生成树叶标签
			var str="";
			var val,key;
			for (var i = 0; i < nums; i++){
				if(i%2==0){
					str+='<li class="contain_li"><div class="contain_li_div1">'+dataHeads[i]+'</div><img src="/static/info/images/leftLeave.png"><div class="contain_li_div2">'+dataValues[i]+'</div>';
				}else{
					str+='<li class="contain_li"><div class="contain_li_div1">'+dataHeads[i]+'</div><img src="/static/info/images/rightLeave.png"><div class="contain_li_div2">'+dataValues[i]+'</div>';
				}
			}
			$dCon.html(str);
			var $dLi=$('.infoTree_contain li');
			var $dImg=$('.infoTree_contain .contain_li img');
			//定位树叶
			var k=0;
			$dLi.each(function(){
				var dLi_top=(k%2==0)?(k+1)*60:k*60;
				var dLi_left=30+(k%2)*100;
				$(this).css('top',dLi_top+'px');
				$(this).css('left',dLi_left+'px');
				$(this).addClass('contain_li_'+k);
				k++;
			});

			$('#infoTree_Modal').modal("show");
			//动画部分
			var time=1000;
			for(var i = 0; i < nums; i++){
				$(".contain_li_" + i).animate({
					opacity:1
				},i*time);
				$(".contain_li_"+i+" .contain_li_div1").animate({
					opacity:1
				},i*(time+250));
				$(".contain_li_"+i+" .contain_li_div2").animate({
					opacity:1
				},i*(time+500));
			}
    	}
        $(function () {
            //初始化页面高度
            var winH = $(window).height();
                $(".skin").css("height", winH + "px");
            
            //切换页面自动刷新
            $(window).resize(function () {
                window.location.reload();
            })
        })
    </script>
</body>

</html>
